<html ng-app="ivreWebUi">

  <!--
    This file is part of IVRE.
    Copyright 2011 - 2025 Pierre LALET <pierre@droids-corp.org>

    IVRE is free software: you can redistribute it and/or modify it
    under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    IVRE is distributed in the hope that it will be useful, but WITHOUT
    ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
    or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public
    License for more details.

    You should have received a copy of the GNU General Public License
    along with IVRE. If not, see <http://www.gnu.org/licenses/>.
  -->

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="ivre/flow.css"/>
    <link rel="stylesheet" type="text/css" href="fi/css/flag-icon.css" />
    <link rel="stylesheet" type="text/css" href="ivre/ivre.css" />
    <link rel="stylesheet" type="text/css" href="ivre/ivre-dark.css" id="ivre-dark-stylesheet" disabled />
    <link rel="icon" type="image/png" id="favicon" href="favicon.png" />
    <title>IVRE Web UI</title>
  </head>

  <body ng-controller="IvreFlowCtrl" ng-init="update_theme()"> 

    <div ng-controller="IvreMenuCtrl" ivre-menu="flow"> </div>
    <div class="container-fluid nomargin" style="overflow-x: hidden;">

      <!-- Sidebar -->
      <div class="col-xs-12 col-md-3" id="sidebar" ng-hide="!show_sidebar">
        <div class="row">
          <ul class="nav nav-tabs" id="menu-tab" role="tablist">
            <li role="presentation" class="active">
              <a href="#menu-tab-explore" target="_self" role="tab" data-toggle="tab">Explore</a></li>
            <li role="presentation">
              <a href="#menu-tab-layout" target="_self" role="tab" data-toggle="tab">Display</a></li>
            <li role="presentation">
              <a href="#menu-tab-details" target="_self" role="tab" data-toggle="tab">Details</a></li>
          </ul>
        </div>

        <!-- Tab panes -->
        <div class="row" style="margin-top: 10px;">
          <div id="control-pane" class="col-xs-12">
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="menu-tab-explore">
                {{counts.flows || "no"}} flows,
                {{counts.servers || "no"}} servers,
                {{counts.clients || "no"}} clients
                <query-builder title="Node query" bind-to="query.nodes"
                               on-submit="query.skip = 0; update_graph_data()"
                               on-load="query_ready.nodes = true; update_graph_data()">
                </query-builder>
                <query-builder title="Edge query" bind-to="query.edges"
                               on-submit="query.skip = 0; update_graph_data()"
                               on-load="query_ready.edges = true; update_graph_data()">
                </query-builder>
                <ul class="nav">
                    <li class="sidebox-header">
                      <i class="glyphicon glyphicon-resize-full black"></i>
                   	Time query
                    </li>
		    <form class="form-horizontal"> 
			    <div class="form-group">
				    <label for="node_after" class="col-md-4 control-label">
					    After
				    </label>
				    <div class="col-md-8">
					    <input id="node_after"
						   placeholder="YYYY-MM-DD HH:mm"
						   class="form-control"
						   title="Format: YYYY-MM-DD HH:mm"
						   pattern="^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$"
						   ng-trim="true"
						   ng-model="query.after"
						   />
				    </div>
			    </div>
			    <div class="form-group">
				    <label for="node_before" class="col-md-4 control-label">
					    Before
				    </label>
				    <div class="col-md-8">
					    <input id="node_before"
						   placeholder="YYYY-MM-DD HH:mm"
						   class="form-control"
						   pattern="^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$"
						   title="Format: YYYY-MM-DD HH:mm"
						   ng-trim="true"
						   ng-model="query.before"/>
				    </div>
			    </div>
		    </form>
                  <li class="sidebox-header">
                    <i class="glyphicon glyphicon-resize-full black"></i>
                    Options
                  </li>
                  <form class="form-horizontal"
                        ng-submit="update_graph_data()">
                    <div class="form-group">
                      <label for="query_mode" class="col-md-4 control-label">
                        Mode
                      </label>
                      <div class="col-md-8">
                        <select class="form-control" id="query_mode"
                                ng-model="query.mode"
                                ng-options="mode.id as mode.label for mode in query_modes">
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="query_orderby" class="col-md-4 control-label">
                        Order by
                      </label>
                      <div class="col-md-8">
                        <select class="form-control" id="query_orderby"
                                ng-model="query.orderby"
                                ng-options="orderby.id as orderby.label for orderby in query_orderbys">
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="query_limit" class="col-md-4 control-label">
                        Limit
                      </label>
                      <div class="col-md-8">
                        <input type="number" class="form-control" id="query_limit" min=0
                               ng-model="query.limit"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="query_skip" class="col-md-4 control-label">
                        Skip
                      </label>
                      <div class="col-md-8">
                        <div class="input-group">
                          <input type="number" class="form-control" id="query_skip" min=0
                                 ng-model="query.skip"/>
                          <span class="input-group-addon clickable"
                                ng-click="query.skip = query.skip + query.limit; update_graph_data()">
                            <i class="glyphicon glyphicon-plus"></i></span>
                          <span class="input-group-addon clickable"
                                ng-click="query.skip = (query.skip - query.limit < 0) ? 0 : query.skip - query.limit; update_graph_data()">
                            <i class="glyphicon glyphicon-minus"></i></span>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-4 col-sm-8">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox" ng-model="query.timeline">
                            Timeline
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-3 col-sm-6">
                        <button type="submit" class="btn btn-default">Refresh</button>
                      </div>
                    </div>
                  </form>
                </ul>
              </div>

              <div role="tabpanel" class="tab-pane" id="menu-tab-layout">
                <ul class="nav">
                  <form class="form-horizontal"
                        ng-submit="update_graph_display()">
                    <li class="sidebox-header">
                      <i class="glyphicon glyphicon-resize-full black"></i>
                      Nodes
                    </li>
                    <div class="form-group">
                      <label for="node_size" class="col-md-4 control-label">
                        Size
                      </label>
                      <div class="col-md-8">
                        <input id="node_size"
                               class="form-control" ng-model="gfmt.nodes.size"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="node_size_scale" class="col-md-4 control-label">
                        Size scale
                      </label>
                      <div class="col-md-8">
                        <input type="number" id="edge_size_scale"
                               class="form-control"
                               ng-model="node_size_scaling"
                               ng-change="update_graph_display()"/>
                      </div>
                    </div>
                    <li class="sidebox-header">
                      <i class="glyphicon glyphicon-resize-full black"></i>
                      Edges
                    </li>
                    <div class="form-group">
                      <label for="edge_size" class="col-md-4 control-label">
                        Size
                      </label>
                      <div class="col-md-8">
                        <input id="edge_size"
                               class="form-control" ng-model="gfmt.edges.size"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="edge_size_scale" class="col-md-4 control-label">
                        Size scale
                      </label>
                      <div class="col-md-8">
                        <input type="number" id="edge_size_scale"
                               class="form-control"
                               ng-model="edge_size_scaling"
                               ng-change="update_graph_display()"/>
                      </div>
                    </div>
                  </form>
                  <form class="form-horizontal"
                        ng-submit="draw_timeline()"
                        ng-if="query.timeline">
                    <li class="sidebox-header" ng-if="query.timeline">
                      <i class="glyphicon glyphicon-resize-full black"></i>
                      Timeline
                    </li>
                    <input type="submit" tabindex="-1"
                           style="position: absolute; left: -1000px; width: 1px; height: 1px;"/
                    <form class="form-horizontal">
                      <div class="form-group">
                        <label for="play_frame_duration" class="col-md-4 control-label">
                          Play frame duration (ms)
                        </label>
                        <div class="col-md-8">
                          <input type="number" class="form-control"
                                 id="play_frame_duration"
                                 ng-model="play_props.frame_duration"/>
                        </div>
                      </div>

                      <div class="form-group" ng-if="!playing">
                        <button type="submit" class="col-xs-offset-2 col-xs-8 btn btn-default"
                          ng-click="play_timeline()">
                          <i class="glyphicon glyphicon-play black"></i>
                          Play timeline
                        </button>
                      </div>

                      <div class="form-group" ng-if="playing">
                        <button type="submit" class="col-xs-offset-2 col-xs-8 btn btn-default"
                          ng-click="stop_timeline()">
                          <i class="glyphicon glyphicon-stop black"></i>
                          Stop playing
                        </button>
                      </div>
                    </form>
                  </form>
                  <form class="form-horizontal">
                      <li class="sidebox-header">
                          <i class="glyphicon glyphicon-resize-full black"></i>
                          Theme
                      </li>
                      <div class="form-group">
                          <div class="col-sm-offset-4 col-sm-8">
                              <div class="checkbox">
                                  <label>
                                      <input type="checkbox" ng-model="light_theme"
                                        ng-change="update_theme()">
                                      Light theme
                                  </label>
                              </div>
                          </div>
                      </div>
                  </form>
                </ul>
              </div>

              <div role="tabpanel" class="tab-pane" id="menu-tab-details">
                <div class="col-xs-12">
                  <div class="node-details">
                    <elt-details/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 fill" id="main-graph-container" ng-class="{'col-md-9': show_sidebar}">
        <div class="row main">
          <div class="col-xs-12 fill">
          <sigma-graph id="graph-container" sigma="sigma"
                       on-load="init_flow();"/>
          </div>
          <button id="fullscreen-btn" ng-click="toggle_sidebar()" ng-class="{'active': !show_sidebar}">
               <i class="glyphicon glyphicon-fullscreen"></i>
            </button>
        </div>
        <div class="row status">
          <div id="timeline" class="fill">
          </div>
        </div>

      </div>
    </div>

    <script type="text/javascript" src="jq/jquery.js"></script>
    <script type="text/javascript" src="bs/js/bootstrap.js"></script>
    <script type="text/javascript" src="d3/js/d3.v3.min.js"></script>
    <script type="text/javascript" src="d3/js/topojson.v1.min.js"></script>
    <script type="text/javascript" src="an/js/angular.js"></script>
    <script type="application/javascript" src="lk/sigma.min.js"></script>
    <script type="application/javascript" src="lk/plugins.min.js"></script>
    <script type="text/javascript">
      var config = {};
    </script>
    <script type="text/javascript" src="cgi/config"></script>
    <script type="text/javascript" src="ivre/content.js"></script>
    <script type="text/javascript" src="ivre/form-helpers.js"></script>
    <script type="text/javascript" src="ivre/utils.js"></script>
    <script type="text/javascript" src="ivre/graph.js"></script>
    <script type="text/javascript" src="ivre/filters.js"></script>
    <script type="text/javascript" src="ivre/compare.js"></script>
    <script type="text/javascript" src="ivre/controllers.js"></script>
    <script type="text/javascript" src="ivre/flow/controllers.js"></script>
    <script type="text/javascript" src="ivre/params.js"></script>
    <script type="text/javascript" src="ivre/tooltip.js"></script>
    <script type="text/javascript" src="ivre/ivre.js"></script>
  </body>

</html>

